import React, { Component } from 'react'
import Header from '../Common/Header'
import { connect } from 'react-redux';
import { filter_action, lsjl_action } from '../../store/store';
import { Link } from 'react-router-dom'

class Search extends Component {

    render() {
        return (
            <div className="search">
                <Header title="搜索" back={<span onClick={() => { this.props.history.push({ pathname: '/home' }) }}>&lt;</span>}></Header>
                <div className="content">
                    <div className="search">
                        <input type="text" placeholder="输入商家、商品名称" onChange={(e) => {
                            this.props.ssvalue(e.target.value); this.props.sslsjl(e.target.value);
                        }} /><span>搜索</span>
                    </div> <h3>历史搜索</h3>
                    <div className="lsjl">
                        {this.props.lsjl.map((item, i) => {
                            return (
                                <span key={i}>{item}</span>
                            )
                        })}
                    </div>
                    <div className="ssfx">
                        <h3>搜索发现</h3>
                        <div className="list">
                            {
                                this.props.list.length > 0 &&
                                this.props.list.map((item, index) => {
                                    return (
                                        <Link className="item" key={index} to={{ pathname: '/shop', state: item }}>
                                            <div className="img">
                                                <img src={item.pic} alt="" />
                                            </div>
                                            <div className="text">
                                                <div className="title">
                                                    {item.title}
                                                </div>
                                                <div className="yxl">
                                                    <span>月销量：{item.yxl}</span><span>{item.km}km</span>
                                                </div>
                                                <div className="mj">
                                                    <span>满{item.xm}减{item.mj1}</span><span>满{item.dm}减{item.mj2}</span><span>满{item.gm}减{item.mj3}</span>
                                                </div>
                                            </div>
                                        </Link>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect(
    (state) => {
        return {
            list: state.list,
            lsjl: state.lsjl
        }
    },
    (dispatch) => {
        return {
            ssvalue: (value) => {
                dispatch(filter_action(value))
            },
            sslsjl: (value) => {
                dispatch(lsjl_action(value))
            }
        }
    }
)(Search)